<template>
  <div style="width: 100%; height: 100%;">
    <div id="map" class="map" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup lang="ts">
import Map from 'ol/Map';
import View from 'ol/View';

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import {onMounted} from "vue";

import {Distance} from "@/view/gis/measure";

/**
 * 地图测绘
 */
const initMap = () => {

    let map = new Map({
        view: new View({
            center: [12950000, 4860000],
            zoom: 7
        }),
        layers: [
            // 底图
            new TileLayer({
                source: new XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'})
            })
        ],
        target: 'map',
    });

    const distance = new Distance(map);
}

onMounted(() => {
    initMap();
})
</script>
